<template>
  <div>
    <div class="card-text">
      <h1>Committee</h1>
      <!-- <div>
        <h2>International Program Committee Co-Chairs</h2>
        <table>
          <tbody>
            <tr><td>Thomas Meurer</td><td>KIT, Karlsruhe, Germany</td></tr>
            <tr><td>Christophe Prieur</td><td>CNRS, Grenoble, France</td></tr>
          </tbody>
        </table>
      </div> -->
      <div v-for="(data,index) in datas" :key="index">
        <h2>{{ data.title }}</h2>
        <table>
          <tbody>
            <tr v-for="(committee,index) in data.committees" :key="index">
              <td>{{ committee.name }}</td>
              <td style="width: 75%;">{{ committee.synopsis }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
// import SpeakerCard from '../components/Committee/SpeakerCard.vue'
export default {
  components: { },
  data() {
    return {
      datas:[],
    };
  },
  created() {
    this.$http.get('/json/Committee.json').then((response) => {
      this.datas = response.data.datas;
      console.log(response);
    });
  },
}
</script>

<style lang="less" scoped>
@import "../components/typora_like.less";

.speaker-card{
  display: block;
  text-align: center;
}

table {margin: 0 auto;}
// table,table tr th, table tr td { border:3px solid #0094ff; }

table {  
  width: 1200px; 
  min-height: 25px; 
  line-height: 35px; 
  text-align: left; 
  border-collapse: collapse; 
  border-spacing: 0;
  font-family: 'Times New Roman';
  font-weight: bold;
}


</style>
